<template>
  <ElContainer style="height: 100%">
    <ElMain>
      <vue3-pro-table ref="tableRef" style="width: 100%" :request="getList" :columns="state.columns"
        :search="state.search" :static-search="staticSearch">
        <template #operate="scope">
          <el-button type="primary" icon="Tickets" @click="editRow(scope.row)">
            编辑</el-button>
          <el-button type="danger" icon="Delete" @click="delRow(scope.row)">
            删除</el-button>
        </template>
        <template #toolbar>
          <el-button type="success" @click="handleAddArchive">新增</el-button>
        </template>
      </vue3-pro-table>
    </ElMain>
  </ElContainer>
  <MyDialog v-bind="editDialog" v-model:visible="editDialog.visible">
    <HealthArchives ref="dialogRef" :health-archive="editDialog.healthArchive"
      :personal-archive="editDialog.personalArchive" />
  </MyDialog>
</template>
<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import { delHealthArchives, getHealthArchivesList, getHealthArchivesById } from "@/api/archives";
import HealthArchives from "../HealthArchives/index.vue";
import { IA00_04, IA00_03 } from "@/model";
import useMedicalUser from "@/hooks/useMedicalUser";
const props = defineProps({
  personalArchive: {
    type: Object,
    default: () => { },
  },
});
const tableRef = ref();
const staticSearch = reactive<{ name: string | null }>({
  name: props.personalArchive?.a00_03_10 || null,
});
watch(
  () => props.personalArchive,
  (val) => {
    staticSearch.name = val.a00_03_10 || "";
  }
);

const state = reactive({
  columns: [
    { label: "姓名", prop: "a00_03_05" },
    { label: "性别", prop: "a00_03_07" },
    { label: "出生日期", prop: "a00_03_09" },
    { label: "电话", prop: "a00_03_12" },
    { label: "身份证号码", prop: "a00_03_10" },
    { label: "体检日期", prop: "a00_04_03" },
    { label: "建档日期", prop: "a00_03_53" },
    {
      label: "操作",
      fixed: "right",
      width: 200,
      align: "center",
      tdSlot: "operate", // 自定义单元格内容的插槽名称
    },
  ],
  search: {
    fields: [
      {
        label: "姓名/身份证号",
        name: "name",
      },
      {
        label: "体检日期",
        name: "a00_04_03",
        type: "date",
      },
    ],
  },
});
const delRow = async (row) => {
  await delHealthArchives(row.id);
  tableRef.value.refresh();
};
const editDialog = reactive<{
  title: string;
  visible: boolean;
  healthArchive: Partial<IA00_04>;
  personalArchive: Partial<IA00_03>;
  handleConfirmClick: Function;
}>({
  title: "编辑",
  visible: false,
  healthArchive: {},
  personalArchive: {},
  handleConfirmClick: async () => {
    await dialogRef.value?.save();
    tableRef.value.refresh();
    return true;
  },
});
const dialogRef = ref();
const editRow = async (row) => {
  editDialog.healthArchive = await getHealthArchivesById(row.id) as any;
  editDialog.personalArchive = {
    a00_03_03: row.a00_04_01,
  };
  editDialog.visible = true;
};
// 请求函数
const getList = async (params) => {
  // params是从组件接收的，包含分页和搜索字段。
  const data: any = await getHealthArchivesList(params);
  // 必须要返回一个对象，包含data数组和total总数
  return {
    data: data.data,
    total: +data.total,
  };
};
const { medicalUser } = useMedicalUser()
const handleAddArchive = () => {
  editDialog.healthArchive = {
    a00_03_05: props.personalArchive?.a00_03_05 || medicalUser.value?.partyName,
    id_no: props.personalArchive?.a00_03_10 || medicalUser.value?.certNumber,
  };
  editDialog.visible = true;
};
</script>

<style scoped>

</style>
